<template>
    <div class="app-container">
        <div class="filter-container">
            <el-input v-model="listQuery.keywords" placeholder="名称/电话/邮箱" clearable style="width: 200px;" class="filter-item"
                      @keyup.enter.native="handleFilter"/>

            <el-select v-model="listQuery.user_type" placeholder="类型" clearable class="filter-item" style="width: 200px"
                       @change="handleFilter">
                <el-option v-for="item in typeOptions" :key="item.val" :label="item.label" :value="item.val"/>
            </el-select>
            <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
                Search
            </el-button>
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit"
                       @click="handleCreate">
                添加用户
            </el-button>
        </div>

        <el-table
                :key="tableKey"
                v-loading="listLoading"
                :data="list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
                @sort-change="sortChange"
        >
            <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
                <template slot-scope="scope" align="center">
                    <span>{{ scope.row.admin_id }}</span>
                </template>
            </el-table-column>

            <el-table-column label="名称" min-width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.username }}</span>
                </template>
            </el-table-column>

            <el-table-column label="手机号" min-width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.mobile }}</span>
                </template>
            </el-table-column>

            <el-table-column label="邮箱" min-width="150px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.email }}</span>
                </template>
            </el-table-column>

            <el-table-column label="类型" min-width="100px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.user_type==1?'管理员':'普通用户' }}</span>
                </template>
            </el-table-column>

            <el-table-column label="添加时间" width="180px" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.created_at }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" class-name="small-padding fixed-width" width="230px">
                <template slot-scope="{row}">
                    <el-button size="mini" type="success" @click="handleReset(row)">
                        重置密码
                    </el-button>
                    <el-button  size="mini" type="danger" @click="handleDelete(row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList"/>

    </div>
</template>

<script>
    import waves from '@/directive/waves' // waves directive
    import Pagination from '@/components/Pagination' // secondary package based on el-pagination

    export default {
        name: 'taskTable',
        components: {Pagination},
        directives: {waves},
        data() {
            return {
                tableKey: 0,
                list: null,
                total: 0,
                page: 1,
                limit: 20,
                listLoading: true,
                listQuery: {
                    keywords: undefined,
                    user_type: undefined,
                    sort: '-id',
                },
                typeOptions: [
                    {val: "1", label: "管理员"},
                    {val: "2", label: "普通用户"},
                ],
            }
        },
        created() {
            this.getList()
        },
        methods: {
            getList() {
                this.listLoading = true
                this.$adminApi.admin_getList({
                    page: this.page,
                    limit: this.limit,
                    search: this.listQuery
                }).then(response => {
                    this.list = response.data.rows
                    this.total = response.data.total

                    // Just to simulate the time of the request
                    setTimeout(() => {
                        this.listLoading = false
                    }, 1.5 * 1000)
                }).catch((e)=>{
                    this.loading = false
                })
            },
            handleFilter() {
                this.page = 1
                this.getList()
            },
            sortChange(data) {
                const {prop, order} = data
                if (prop === 'id') {
                    this.sortByID(order)
                }
            },
            sortByID(order) {
                if (order === 'ascending') {
                    this.listQuery.sort = '+id'
                } else {
                    this.listQuery.sort = '-id'
                }
                this.handleFilter()
            },
            handleCreate() {
                this.$router.push({
                    name: 'userAdd',
                    params: {  }
                })
            },
            handleReset(row) {
                this.$confirm('此操作将重置密码为 123456，是否继续?', 'Waring', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$adminApi.admin_resetPwd({admin_id:row.admin_id}).then(response => {
                        this.$message({
                            type: 'success',
                            message: response.msg
                        });
                    })

                    setTimeout(() => {
                        this.page = 1
                        this.getList()
                    }, 1.5 * 1000)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除该用户, 是否继续?', 'Waring', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$adminApi.admin_remove({admin_id:row.admin_id}).then(response => {
                        this.$message({
                            type: 'success',
                            message: response.msg
                        });
                    })

                    setTimeout(() => {
                        this.page = 1
                        this.getList()
                    }, 1.5 * 1000)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        }
    }
</script>
